<template>
  <div class="content-container">
  	<m-Head  v-if="!ok"></m-Head>
    <div class="thd-map">
      <mapComponent :id="mapId"></mapComponent>
      <div id="topbar">
        <button class="action-button esri-icon-minus" id="distanceButton" type="button" title="测量两点之间的距离" @click="measure"></button>
      </div>
      <div class="map-control">
        <div><img :src="compassPng" style="width:2.2rem;height:2.2rem;display: block;margin-left: 0;"></div>
        <div class="eqCenter"><button :id="toCenterBtuId" class="eq-center"></button></div> 
      </div>

    </div>
    <div  class="thd-near">
      <div class="thd-near-group" v-if="pagedata && pagedata.near && !ok">
        <div class="thd-near-item" v-for="(item, index) in pagedata.near" :key="index">
          <div class="thd-near-title">
            <div class="thd-near-name">
              <p>{{item.name}}</p>
            </div>
            <div class="thd-near-distance">
              <p>{{item.distence}}</p>
            </div>
          </div>
          <div class="thd-near-content">
            <div class="thd-near-control">
              <p class="thd-near-label">面积(km²)</p>
              <p class="thd-near-int">{{item.area}}</p>
            </div>
            <div class="thd-near-control">
              <p class="thd-near-label">经济(亿元)</p>
              <p class="thd-near-int">{{item.GDP}}</p>
            </div>
            <div class="thd-near-control">
              <p class="thd-near-label">人口(万人)</p>
              <p class="thd-near-int">{{item.POP_ALL}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div  class="thd-his auto-center" v-if="pagedata && pagedata.his &&!ok">
      <div class="thd-his-title">
        <h3>1949年以来历史灾害地震</h3>
      </div>
      <div class="thd-his-group">
        <div class="thd-his-item" v-for="(item, index) in pagedata.his" :key="index">
          <div class="thd-his-date">
            <p>{{item.EarthquakeDate}}</p>
          </div>
          <div class="thd-his-content">
            <div class="thd-his-addr">
              <div class="thd-his-icon">
                <img :src="item.icon">
              </div>
              <div class="thd-his-name">
                <p>{{item.Macro_epicenter +  item.Magnitude + '地震'}}</p>
              </div>
            </div>
            <div class="thd-his-detail">
              <div class="thd-his-control">
                <p class="thd-his-label">死亡人数(人)</p>
                <p class="thd-his-int">{{item.Death}}</p>
              </div>
              <div class="thd-his-control">
                <p class="thd-his-label">受灾面积(km²)</p>
                <p class="thd-his-int">{{item.Area}}</p>
              </div>
              <div class="thd-his-control">
                <p class="thd-his-label">经济损失(万元)</p>
                <p class="thd-his-int">{{item.DirectEconomicLoss}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="arrow_up" :display="isshow">
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</template>


<script>
import mHead from "@/components/head";
import centerstarPng from "@/assets/mapimg/centerstar.png";
import nearCityPng from "@/assets/mapimg/nearCity.png";
import hiso from "@/assets/imgicon/tdhis1.png";
import hiss from "@/assets/imgicon/tdhis2.png";
import hist from "@/assets/imgicon/tdhis3.png";
import axios from "@/assets/api/axios";
import chart from "@/assets/api/chart";
import compassPng from "@/assets/mapimg/compassicon.png";
import mapComponent from "@/components/map";
import "@/assets/basemap.css";
// import "https://js.arcgis.com/4.8/esri/css/main.css";
import Other_EQ_MARKER from "@/assets/imgicon/tdhisother.png";
import Basemap from "@/assets/api/basemap";
import ArcMap from "@/assets/api/arcmap";

export default {
  name: "thd",
  props: {
    ok: Boolean
  },
  data: function() {
    return {
      //由于vueg的嵌套路由默认不启动转场动画，需要在其匹配组件中设置为启用
      vuegConfig: {
        disable: false
      },
      hisiconarr: [hiso, hiss, hist],
      pagedata: null,
      eqCenter: null,
      mapData: {},
      encarcmap: null,
      compassPng: compassPng,
      baseMap: null,
      mapId: "thdmap",
      toCenterBtuId: "toCentet",
      isshow: 'block',
    };
  },
  created: function() {
    this.getThdData();
    this.stopPull();
  },
  mounted() {},
  methods: {
    stopPull() {
      function getDocumentTop() {
        var scrollTop = 0,
          bodyScrollTop = 0,
          documentScrollTop = 0;
        if (document.body) {
          bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
          documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop =
          bodyScrollTop - documentScrollTop > 0
            ? bodyScrollTop
            : documentScrollTop;
        return scrollTop;
      }

      //可视窗口高度
      function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
          windowHeight = document.documentElement.clientHeight;
        } else {
          windowHeight = document.body.clientHeight;
        }
        return windowHeight;
      }

      //滚动条滚动高度
      function getScrollHeight() {
        var scrollHeight = 0,
          bodyScrollHeight = 0,
          documentScrollHeight = 0;
        if (document.body) {
          bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
          documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight =
          bodyScrollHeight - documentScrollHeight > 0
            ? bodyScrollHeight
            : documentScrollHeight;
        return scrollHeight;
      }

      window.onscroll = function() {
        //监听事件内容
        if (getScrollHeight() == getWindowHeight() + getDocumentTop()) {
          //当滚动条到底时,这里是触发内容
          //异步请求数据,局部刷新dom
          this.isshow = 'none'
        } else {
          this.isshow = 'block'
        }
      };
    },
    getThdData() {
      //震中信息
      let setting = {
        method: "POST",
        url: "/Earthdata/getData"
      };
      let data = {
        handel: "epic"
      };
      axios(
        res => {
          if (res.stutas === 200) {
            let data = res.data;
            if (data[0]) {
              let time = data[0].time;
              this.eqCenter = data[0];
              this.eqCenter.time = time.substring(0, time.length - 3);
            } else {
              console.log("请求不到数据");
            }
          }
        },
        { setting, data }
      ).then(
        function() {
          data = {
            handel: "td"
          };
          axios(
            res => {
              if (res.stutas === 200) {
                let data = res.data;
                this.mapData = this.cloneObj(data);
                let hisEqData = this.mapData.hisEqData;
                for (var item in hisEqData) {
                  if (hisEqData[item]) {
                    hisEqData[item].Magnitude = hisEqData[
                      item
                    ].Magnitude.substring(0, 4);
                  }
                }
                this.pagedata = this.setThdData(data);
                this.baseMap = new Basemap();
                this.mapInit();
              }
            },
            { setting, data }
          );
        }.bind(this)
      );
    },
    setThdData(data) {
      let nearCityData = data.nearCityData;
      let near = null;
      let hisEqData = null;
      if (nearCityData) {
        near = nearCityData.map(item => {
          let obj = null;
          if (Number(item.distence) === 0) {
            item.distence = "震中";
          } else {
            item.distence = "距离震中" + item.distence + "公里";
          }
          obj = Object.assign({}, item);
          return obj;
        });
      }
      if (data.hisEqData) hisEqData = this.arrayFrom(data.hisEqData);
      return {
        near: near,
        his: hisEqData
      };
    },
    arrayFrom(obj) {
      let hisiconarr = this.hisiconarr;
      let rs = [];
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (obj[key]) {
            rs.push(obj[key]);
          }
        }
      }
      rs.forEach((item, index) => {
        item.icon = hisiconarr[index];
        item.Magnitude = Number(item.Magnitude).toFixed(1);
      });
      return rs;
    },
    mapInit() {
      this.encarcmap = new ArcMap(this.mapId, this.eqCenter);
      this.listen();
    },
    cloneObj(obj) {
      var newObj = {};
      if (obj instanceof Array) {
        newObj = [];
      }
      for (var key in obj) {
        var val = obj[key];

        newObj[key] = typeof val === "object" ? this.cloneObj(val) : val;
      }
      return newObj;
    },
    listen() {
      if (this.encarcmap.map) {
        this.encarcmap.setMarker(this.mapData.nearCityData, "nearCity");
        this.encarcmap.setHisEq(this.mapData.hisEqData);
        this.encarcmap.epiLabel();
        this.encarcmap.locator();
      } else {
        setTimeout(() => {
          this.listen();
        }, 1000);
      }
    },
    measure() {
      this.encarcmap.measure();
    }
  },
  components: {
    mHead,
    mapComponent
  }
};
</script>



<style>
.thd-map {
  height: 21rem;
  background-color: transparent;
  padding: 0.3rem 0.2rem;
  position: relative;
}
.thd-near {
  margin-top: 0.5rem;
  background-color: transparent;
}
@media only screen and (min-width: 760px) {
  .thd-near {
    margin-top: 0;
  }
  .thd-map {
    padding: 0;
  }
}
.thd-near div {
  background-color: transparent;
}
.thd-near-group {
  display: block;
}
.thd-near-item p {
  margin: 0;
}
.thd-near-item {
  display: inline-block;
  width: 45%;
  background-color: #fff !important;
  position: relative;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.thd-near-item:after {
  content: "";
  clear: both;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 1px 0 #b9b3b3;
  width: 100%;
  height: 100%;
}
.thd-near-item:first-child {
  margin-right: 3%;
  margin-bottom: 1rem;
}
.thd-near-item:nth-child(3) {
  margin-right: 3%;
}
.thd-near-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 0.2rem;
  padding-left: 0.3rem;
  padding-right: 0.1rem;
  margin-bottom: 1rem;
  position: relative;
  font-size: 12px;
  color: #444242;
  font-weight: 700;
}
.thd-near-title:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  clear: both;
  border-left: 2px solid #ec0707;
  height: 100%;
}
.thd-near-name {
  color: #000;
  height: 16px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thd-near-content {
  font-size: 12px;
  text-align: center;
  font-weight: 700;
  display: flex;
}
.thd-near-control {
  width: calc(100% / 3);
}
p.thd-near-label {
  margin-bottom: 0.3rem;
  color: #736f6f;
  font-size: 10px;
}
p.thd-near-int {
  color: #e80e0e;
}
.thd-his {
  background-color: transparent;
  width: 95%;
}
.thd-his div {
  background-color: transparent;
}
.thd-his p {
  margin: 0;
}
.thd-his-title {
  text-align: left;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}
.thd-his-title h3 {
  display: inline-block;
  padding: 0.2rem 0.3rem;
  background-color: #bdb5b5;
  border-radius: 5px;
  color: #f5eeee;
}
.thd-his-item {
  display: flex;
  text-align: center;
  margin-bottom: 0.5rem;
}
.thd-his-date {
  font-size: 15px;
  font-weight: 700;
  margin-right: 1rem;
  width: 5.1rem;
}
.thd-his-content {
  display: flex;
  flex-direction: column;
}
.thd-his-addr {
  display: flex;
}
.thd-his-icon {
  width: 1rem;
  margin-right: 0.5rem;
}
.thd-his-name {
  font-size: 15px;
  font-weight: 700;
}
.thd-his-detail {
  display: flex;
  font-weight: 500;
  position: relative;
  font-size: 12px;
  padding-left: 1rem;
  padding-top: 0.8rem;
  margin-left: 0.5rem;
}
.thd-his-detail:before {
  content: "";
  clear: both;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid #000;
  height: 100%;
}
.thd-his-control {
  margin-right: 0.5rem;
}
p.thd-his-label {
  margin-bottom: 0.3rem;
  color: #5f5c5c;
  font-size: 10px;
}
p.thd-his-int {
  font-size: 15px;
}
.thd-map h4 {
  margin: 0;
  text-align: center;
}
.thd-map .map-control {
  display: none;
}

.esri-ui .esri-ui-manual-container .esri-popup__main-container {
  background-color: #fff;
}
.esri-ui .esri-ui-top-left .esri-widget {
  background-color: #fff;
}
.esri-ui .esri-ui-top-right .esri-widget {
  background-color: #fff;
}
.esri-ui .esri-ui-inner-container > .esri-ui-corner {
  background-color: transparent;
}
.esri-ui-manual-container > .esri-popup > .esri-popup__main-container {
  width: 200px;
}
#topbar {
  background: #fff;
  /* padding: 10px; */
}
.action-button {
  font-size: 16px;
  background-color: transparent;
  border: 1px solid #d3d3d3;
  color: #6e6e6e;
  height: 32px;
  width: 32px;
  text-align: center;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.action-button:hover,
.action-button:focus {
  background: #0079c1;
  color: #e4e4e4;
}

.active {
  background: #0079c1;
  color: #e4e4e4;
}
.esri-expand__container .esri-expand__panel .esri-widget-button {
  background-color: #fff;
}
/* 下拉闪烁箭头 */
.arrow_up {
  /* //居中 */
  position: fixed;
  left: 50%;
  bottom: 70px;
  color: white;
}

.arrow_up span {
  /* //箭头形状设置 */
  position: absolute;
  width: 20px;
  height: 20px;
  top: 10px;
  -webkit-transform: rotate(45deg);
  border-top: 1px solid rgb(0, 204, 255);
  border-left: 1px solid rgb(0, 204, 255);
  margin-left: -10px;
  opacity: 0;
  -webkit-animation: up 2s infinite;
  animation: up 2s infinite;
}

.arrow_up span:nth-of-type(2) {
  top: 20px;
}

.arrow_up span:nth-of-type(1) {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}

@-webkit-keyframes up {
  /* //动画设置 */
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0) -webkit-rotate(45deg);
  }

  50% {
    opacity: 1;
    -webkit-transform: translate(0, -20px) -webkit-rotate(45deg);
  }

  100% {
    opacity: 0;
  }
}

@keyframes up {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(45deg);
  }

  50% {
    opacity: 1;
    transform: translate(0, -20px) rotate(45deg);
  }

  100% {
    opacity: 0;
  }
}
</style>